<template>
	<view>
		<!-- 自定义导航栏 -->
		<view>
			<!-- 2.0.19支持autoBack，默认为false -->
			<u-navbar title="详情页" @rightClick="rightClick" :autoBack="true" :placeholder="true">
			</u-navbar>
		</view>

		<!-- 详情页的东西 -->
		<view class="wrap">
			<view class="box">
				<image :src="detailList.img" mode=""></image>
				<view class="box_title">
					<view style="color: red; font-size: 50rpx; padding: 20rpx 0 20rpx 0;">¥{{detailList.price}}
						<del style="color: #ccc; font-size: 30rpx"><text>¥{{detailList.market_price}}</text></del>
					</view>
					<view style="font-size:35rpx ;">{{detailList.goodsname}}</view>
					<view class="box_text">双11限制</view>
					<view style="background-color: #ccc;">
						此商品于2020-11-11，结束闪购特卖，品牌美妆闪购专场
					</view>
				</view>
				<view class="father">
					<u-parse :content="detailList.description" class="chuantou"></u-parse>
				</view>
			</view>
		</view>

		<!-- 底部固定定位 -->
		<view class="bottom">
			<view class="bottom_icon">
				<u-icon name="kefu-ermai" color="#2979ff" size="28"></u-icon>
				<view>客服</view>
			</view>
			<view class="bottom_icon">
				<u-icon name="home" color="#2979ff" size="28"></u-icon>
				<view>店铺</view>
			</view>
			<view class="bottom_icon" @click="goCarts">
				<u-icon name="shopping-cart" color="#2979ff" size="28" class="bottom_icon"></u-icon>
				<view>购物车</view>
			</view>
			<view style="display: flex;">
				<view class="cart" @click="goCart">
					加入购物车
				</view>
				<view class="carts">
					立即购买
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				detailList: []
			}
		},
		methods: {
			goCarts() {
				uni.switchTab({
					url: '/pages/cart/cart'
				})
			},
			goCart() {
				this.$http({
					url: '/api/cartadd',
					data: {
						uid: this.$store.state.userInfo.uid,
						goodsid: this.detailList.id,
						num: 1
					},
					method: 'POST'
				}).then((res) => {
					uni.showToast({
						title: '成功加入购物车',
					})
				})
				// console.log(this.$store.state.userInfo.uid);
				// console.log(this.detailList.id);
				// uni.showToast({
				// 	title:'成功加入购物车',
				// })
				// return
				// uni.switchTab({
				// 	url:'/pages/cart/cart',
				// 	data:{
				// 		id:this.detailList.id
				// 	}
				// })
			}
		},
		onLoad(e) {
			// console.log(e);
			this.$http({
				url: '/api/getgoodsinfo',
				data: {
					id: e.id,
				}
			}).then((res) => {
				// console.log(res);
				if (res.data.code == 200) {
					res.data.list.map((item, index) => {
						item.img = this.$baseUrl + item.img
					})
					this.detailList = res.data.list[0]
				}
				// console.log(this.detailList.id);
			})
		}
	}
</script>

<style scoped>
	.box_text {
		width: 200rpx;
		height: 60rpx;
		background-color: #FF6040;
		border-radius: 25rpx;
		color: white;
		text-align: center;
		line-height: 60rpx;
	}

	.box .box_title {
		padding: 20rpx;
	}

	.box image {
		width: 100%;
		height: 500rpx;
	}

	.bottom {
		width: 100%;
		height: 100rpx;
		background-color: white;
		border-top: 1px solid black;
		background-color: white;
		/* 先给父盒子添加弹性盒子和测轴距中 再给子盒子添加测轴距中 然后给子盒子决定主轴的方向（即项目的排列方向） */
		/* 
		 row（默认值）：主轴为水平方向，起点在左端。
		 row-reverse：主轴为水平方向，起点在右端。
		 column：主轴为垂直方向，起点在上沿。
		 column-reverse：主轴为垂直方向，起点在下沿。
		 */
		display: flex;
		justify-content: space-around;
		align-items: center;
		position: fixed;
		bottom: 0;
	}

	.bottom_icon {
		display: flex;
		align-items: center;
		flex-direction: column;
	}

	.cart {
		width: 180rpx;
		height: 70rpx;
		text-align: center;
		line-height: 70rpx;
		background-color: #ffc25e;
		color: white;
		border-radius: 45rpx 0 0 45rpx;
	}

	.carts {
		width: 180rpx;
		height: 70rpx;
		text-align: center;
		line-height: 70rpx;
		background-color: #FF6040;
		color: white;
		border-radius: 0 45rpx 45rpx 0;
	}

	.father {
		width: 100%;
	}

	.chuantou image {
		width: 100% !important;
		height: 100%;
	}
</style>